<template>
    <!-- 数据列表 -->
    <div class="search-box">
        <div class="search2">
            <div class="left">
                <el-icon>
                    <Search />
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button v-permission="'addProductAttr'" @click="addProductAttr">添加</el-button>
            </div>
        </div>
    </div>
    <div>
        <el-table :data="list" border table-layout="auto" cell-class-name="align-c">
            <el-table-column prop="id" label="编号" />
            <el-table-column prop="name" label="类型名称" />

            <el-table-column prop="attributeCount" label="属性数量" />
            <el-table-column prop="paramCount" label="参数数量" />

            <el-table-column label="设置">
                <template #default="{ row }">
                    <el-button :disabled="route.query.parentId ? true : false" v-permission="'productAttrList'"
                        @click="productAttrList(row)">属性列表</el-button>
                    <el-button @click="parameterList(row)">参数列表</el-button>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button @click="editProductAttr(row)" v-permission="'updateProductAttr'">编辑</el-button>
                    <el-button type="danger" @click="delProductAttr(row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
        <ElConfigProvider :locale="locale">
            <el-pagination v-model:current-page="pageNum" v-model:page-size="form.pageSize" :page-sizes="[5, 10, 15]"
                :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="pageChangeHandle" @current-change="pageSizeChangeHandle" />
        </ElConfigProvider>
    </div>

    <!-- 添加管理属性 -->
    <addproductAttr :show="addshow" :id="addId" :row="RowData" @Show="whatShow" />

</template>

<script setup lang='ts'>
import { Search } from "@element-plus/icons-vue";
import useTable from '@/hooks/useTable';
import { reactive, ref, toRefs, watch, watchEffect } from 'vue';
import zhCn from 'element-plus/lib/locale/lang/zh-cn';
import { addProductAttrApi, delAttributeApi, deleteAttrApi, productCategoryListApi, updateNavStatusApi, updateShowStatusApi } from './api';
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import addproductAttr from './addproductAttr.vue'

const router = useRouter()
const route = useRoute()
const urlId = ref<any>(route.query.parentId)

// 分页器数据
const background = ref(false)
const locale = zhCn

// 传入数据
const form = ref({
    // 搜索框数据
    parentId: 0,
    pageSize: 5,
})
let { list, total, pageNum, pageSize, pageChangeHandle, pageSizeChangeHandle, ListFn } = useTable(addProductAttrApi)
console.log(list.value);


const addshow = ref<boolean>(false)
const addId = ref<number>(0)
let RowData = reactive({})

// 添加商品属性
const addProductAttr = () => {
    addshow.value = true
}

// 添加页选择后
const whatShow = (val: boolean,) => {
    addshow.value = false;
    addId.value = 0
    RowData = {
        attributeCount: 0,
        id: 0,
        name: '',
        paramCount: 0,
    }
    if (val) ListFn();
}


// 编辑商品属性
const editProductAttr = (row: IProductAttrList) => {
    addshow.value = true;
    addId.value = row.id;
    console.log(row.id);
    RowData = row;
}
// 删除商品属性
const delProductAttr = (id: number) => {
    ElMessageBox.confirm('确定要删除该商品属性吗', '删除商品属性', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => {
        delAttributeApi(id).then((res) => {
            ElMessage.success("删除成功")
            ListFn()
        })
    }).catch(() => {
        ElMessage.error('取消删除')
    })
}


// 点击属性列表
const productAttrList = (row: IProductAttrList) => {
    router.push(`/pms/productAttrList?cid=${row.id}&cname=${row.name}&type=0`)
}

// 点击参数列表
const parameterList=(row: IProductAttrList)=>{
    router.push(`/pms/productAttrList?cid=${row.id}&cname=${row.name}&type=1`)
}


</script>
<style lang="less" scoped>
.search-box {
    box-shadow: 0 0 10px 0px #ccc;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;

    .search {
        padding: 20px 0px;
        display: flex;


        &:first-child {
            justify-content: space-between;
        }

        &:last-child {
            display: flex;
            flex-wrap: wrap;
            // width: 300px;
            margin-left: 40px;

            div {
                width: 250px;
                display: flex;

                span {
                    font-size: 14px;
                    width: 125px;
                    margin-right: 12px;
                }
            }

        }
    }

    .search2 {
        display: flex;
        width: 100%;
        justify-content: space-between;

        .left {

            span {
                line-height: 20px;
                font-size: 14px;
                align-items: center;
            }
        }


    }
}

.page {
    float: right;
    margin-top: 20px;
}

:deep(.align-c),
:deep(.is-leaf) {
    .cell {
        text-align: center !important;
    }


}
</style>